<template>
	<view class="autograph">
		<view class="personal_jkhz_bg">
			<image src="@/static/images/index/personal_jkhz.png" mode="" style="width: 100%;"></image>
		</view>
		<Signature ref="sig" v-model="Sign"></Signature>
		<!-- <text style="overflow-wrap: break-word;">{{v}}</text> -->
		
		<view style="position: absolute;bottom: 0rpx;left: 0rpx;width: 100%;background: #fff;">
			<view class="fontcolor">
				注:您的卡片已激活，请您进行签名确认。如您本次未完成签名确认，将不会影响您的权益使用，可在等待期后使用权益前再次签名确认。
			</view>
			<button style="margin: 20rpx;" class="plainlk1" @click="sendautograph">去签名</button>
		</view>
		<uni-popup ref="message" type="dialog">
			<uni-popup-dialog 
				:type="msgType" 
				cancelText="返回个人中心" 
				confirmText="预约权益" 
				title="重要提示" 
				:content="popupContent"
				@confirm="dialogConfirm"
				@close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>	
	</view>
</template>

<script>
	import Signature from '@/components/sin-signature/sin-signature.vue'
	export default {
		data(){
			return{
				popupContent:'',
				type: 'center',
				msgType: 'success',
				Sign: ''
			}
		},
		components: {
			Signature
		},
		onLoad: function(option) {
		  console.log(option,'option')
		},
		methods:{
			dialogConfirm(){
				uni.navigateTo({
					// url:'/pages/code/myRights',
					url:'/pages/code/serviceIntroduct',
				})
			},
			dialogClose(){
				uni.navigateTo({
					url:'/pages/code/myRights'
				})
			},
			async sendautograph(){
				let s = await this.$refs.sig.getSyncSignature();
				console.log('组件版本', this.$refs.sig.VERSION);
				console.log('签名数据', s);
				this.$refs.message.open()
				this.popupContent = `恭喜您，权益激活成功。`
			}
		}
	}
</script>

<style>
	.fontcolor{
		padding: 20rpx;
		color: rgb(153, 153, 153);
	}
	.personal_jkhz_bg{
		min-height: 44rpx;
		margin-bottom: 20rpx;
		background: url('@/static/images/index/detail_top_bg.png') 0% 0% / 100% no-repeat;
		font-size: 1rem;
		padding: 40rpx;
	}
	.plainlk1{
		border-color: transparent;
		background: rgb(41, 197, 136);
		color: rgb(255, 255, 255);
	}
	.autograph{
		/* padding: 20rpx; */
	}
</style>